<script setup>
import Product from "@/components/Shop/Product.vue";
import {useShopInfoStore} from "@/stores/shop.js";
import {storeToRefs} from "pinia";
import {useRoute, useRouter} from "vue-router";
import {computed, ref, watch} from "vue";

const toggleCart = ref();
const shopInfoStore = useShopInfoStore();
const {nearbyList} = storeToRefs(shopInfoStore);
const route = useRoute();
const shopID = Number(route.params.id);
const shopInfo = ref(nearbyList.value.find(item => item.id === shopID));
console.log(shopInfo);
const countSum = () => {
  shopInfo.value.cartList.forEach(item => {
    shopInfo.value.cartList.sum += item.number * item.price
  })
};
countSum();
const resetCart = () => {
  shopInfoStore.resetCart(shopInfo)
}
const router = useRouter();
const orderConfirm = () => {
  router.push({name: 'orderConfirmation', query: {shopID: shopID, sum: shopInfo.value[0].cartList.sum}})
}
const plusCart = (goodID) => {
  shopInfoStore.plusNum(goodID, shopInfo)
}

const minusCart = (goodID) => {
  shopInfoStore.minusNum(goodID, shopInfo)
};
const checkedAll = () => {
  let find = shopInfo.value.cartList.forEach(item => {
    item.checked = shopInfo.value.cartList.checked;
  });
  shopInfo.value.cartList.checked = !shopInfo.value.cartList.checked;
};
const checkedBtn = (index) => {
  shopInfo.value.cartList[index].checked = !shopInfo.value.cartList[index].checked;
  let find = shopInfo.value.cartList.filter(item => {
    return item.checked === true;
  });
  console.log(find)
  shopInfo.value.cartList.checked = null;
  if (find.length === shopInfo.value.cartList.length) {
    shopInfo.value.cartList.checked = true
  } else {
    shopInfo.value.cartList.checked = false
  }
}
</script>

<template>
  <div class="cart">
    <div class="cart_mask" v-if="toggleCart" v-show="shopInfo.cartList.length!==0"></div>
    <div class="cart_product" v-if="toggleCart" v-show="shopInfo.cartList.length!==0">
      <div class="cart_product_header" v-if="true">
        <div class="cart_product_header_allChecked" @click="checkedAll">
          <input type="checkbox" class="circle-checkbox" :checked="shopInfo.cartList.checkAll"> 全选
        </div>
        <div class="cart_product_header_clear" @click="resetCart">清空购物车</div>
      </div>
      <div class="cart_product_list" v-for="(item, index) in shopInfo.cartList">
        <div class="cart_product_list_item">
          <div class="checkbox" @click="checkedBtn(index)">
            <!-- <input type="checkbox" class="circle-checkbox" :checked="item.checked" @change="changeChecked(item)" name="" id=""> -->
            <input type="checkbox" class="circle-checkbox" :checked="item.checked">
          </div>
          <div class="content">
            <Product :product="{item}" @plusCart="plusCart" @minusCart="minusCart"/>
          </div>
        </div>
      </div>
    </div>
    <div class="cart_check">
      <div class="cart_check_icon" @click="toggleCart=!toggleCart">
        <img src="http://www.dell-lee.com/imgs/vue3/basket.png" alt="">
        <span class="tag" v-if="shopInfo.cartList.length!==0">{{ shopInfo.cartList.length }}</span>
      </div>
      <div class="cart_check_empty" v-if="shopInfo.cartList.length===0">购物车是空的</div>
      <div class="cart_check_content" v-else>
        <div class="cart_check_content_total_price">总计 : <span
            class="check_content_total_price_number">￥{{ shopInfo.cartList.sum.toFixed(2) }}</span></div>
        <div class="cart_check_content_submit" @click="orderConfirm">结算</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";

.cart {
  &_mask {
    position: absolute;
    top: 0;
    bottom: .5rem;
    left: 0;
    right: 0;
    background-color: rgba($color: #000000, $alpha: .4);
  }

  &_product {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: .5rem;
    background-color: $bgColor;

    //圆形复选框
    /* 设置选中背景 */
    .circle-checkbox:checked {
      background: #1673ff;
    }

    /* 设置复选框样式 */
    .circle-checkbox {
      width: .2rem;
      height: .2rem;
      background-color: #ffffff;
      border: solid 1px $light-fontColor;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      font-size: 0.8rem;
      margin: 0;
      padding: 0;
      position: relative;
      display: inline-block;
      vertical-align: top;
      cursor: default;
      -webkit-appearance: none;
      -webkit-user-select: none;
      user-select: none;
    }

    /* 设置伪类，即显现的对勾样式 */
    .circle-checkbox:checked::after {
      content: "";
      top: 5px;
      left: 4px;
      position: absolute;
      background: transparent;
      border: #fff solid 2px;
      border-top: none;
      border-right: none;
      height: 3px;
      width: 8px;
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }

    &_header {
      padding: .18rem;
      display: flex;
      justify-content: space-between;
    }

    &_list {
      max-height: 3rem;
      overflow-y: scroll;

      &_item {
        display: flex;

        .checkbox {
          display: flex;
          align-items: center;
          margin-left: .18rem;
        }

        .content {
          flex: 1;
          width: 100%;
        }
      }
    }
  }

  &_check {
    width: 100%;
    height: .49rem;
    border-top: .01rem solid $content-bgColor;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    // 购物车图标
    &_icon {
      width: .84rem;
      height: .49rem;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      img {
        width: .28rem;
        height: .26rem;
      }

      .tag {
        display: inline-block;
        width: .15rem;
        height: .15rem;
        border-radius: 50%;
        background-color: $hightlight-fontColor;
        color: $bgColor;
        font-size: .1rem;
        text-align: center;
        position: absolute;
        top: .05rem;
        right: .18rem;
      }

    }

    // 空购物车
    &_empty {
      line-height: .49rem;
    }

    // 总价
    &_content {
      flex: 1;
      display: flex;
      position: relative;
      width: 100%;

      &_total_price {
        flex: 1;
        line-height: .49rem;
        color: $hightlight-fontColor;

        &_number {
          font-size: .18rem;
        }
      }

      &_submit {
        width: .98rem;
        height: .49rem;
        background-color: $btn-bgColor;
        color: $bgColor;
        text-align: center;
        line-height: .49rem;
      }
    }
  }
}
</style>